<template>
	<el-breadcrumb separator="/">
		<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
		<el-breadcrumb-item>心理测评</el-breadcrumb-item>
		<el-breadcrumb-item>测评答案管理</el-breadcrumb-item>
	</el-breadcrumb>

	<!-- 行内表单 -->
	<el-form :inline="true" :model="queryInfo" class="demo-form-inline" style="padding: 15px 0">
		<el-form-item label="测评名称">
			<el-input v-model="queryInfo.testName" placeholder="请输入测评名称" clearable @clear="query" />
		</el-form-item>
		<el-form-item label="用户昵称">
			<el-input v-model="queryInfo.username" placeholder="请输入用户昵称" clearable @clear="query" />
		</el-form-item>
		<!--  <el-form-item label="选项">
      <el-select v-model="queryInfo.options" placeholder="请选择选项" clearable @clear="query">
        <el-option label="从不" value="1" />
        <el-option label="偶尔" value="2" />
        <el-option label="有时" value="3" />
        <el-option label="经常" value="4" />
        <el-option label="总是" value="5" />
      </el-select>
    </el-form-item> -->
		<el-form-item>
			<el-button type="primary" @click="query">搜索</el-button>
			<el-button type="danger" @click="batchRemove">批量删除</el-button>
		</el-form-item>
	</el-form>

	<!-- 数据表格 -->
	<el-table ref="multipleTableRef" :data="dataList" style="width: 100%" @selection-change="handleSelectionChange"
		border>
		<el-table-column type="selection" width="50" />
		<el-table-column property="id" label="ID" width="55" />
		<!-- <el-table-column property="evaluationTopic" label="测评题目" /> -->
		<el-table-column property="psyknoTest1.testName" label="测评名称" />
		<el-table-column property="topicScore" label="分值" />
		<el-table-column property="topicConclusion" label="结论内容" />
		<el-table-column property="topicTime" label="测评时间" />
		<el-table-column property="sysUser1.username" label="用户名" />
		<el-table-column fixed="right" label="操作" width="180">
			<template #default="scope">
				<!-- <el-button size="small" type="primary" @click="edit(scope.row)">编辑</el-button> -->
				<el-button size="small" type="danger" @click="remove(scope.row.id)">删除</el-button>
			</template>
		</el-table-column>
	</el-table>

	<!-- 分页区域 -->
	<el-pagination v-model:current-page="queryInfo.pageNum" v-model:page-size="queryInfo.pageSize"
		:page-sizes="[5, 10, 15, 20]" layout="total, sizes, prev, pager, next, jumper" :total="total"
		@size-change="handleSizeChange" @current-change="handleCurrentChange" />

	<!-- 新增和修改对话框
	<el-dialog :title="title" v-model="dialogFormVisible" width="600" @close="cancle">
	  <el-form :model="evaluationData" label-width="100">
	    <el-form-item label="测评题目">
	      <el-input v-model="evaluationData.evaluationName" autocomplete="off" placeholder="请输入测评题目"></el-input>
	    </el-form-item>
	    <el-form-item label="内容简介">
	      <el-input v-model="evaluationData.evaluationIntro" placeholder="请输入内容简介"></el-input>
	    </el-form-item>
	    <el-form-item label="分类">
	      <el-select v-model="evaluationData.evaluationClassifyId" placeholder="请选择分类">
	        <el-option label="性格人格暗室逢灯" value="2" />
	        <el-option label="网络交友1" value="1" />
	      </el-select>
	    </el-form-item>
	    <el-form-item label="封面图">
	      <el-upload :action="uploadUrl" :on-success="handleUploadSuccess" :before-upload="beforeUpload">
	        <el-icon style="height: 128px; width: 128px;border: 1px dashed #dcdfe6;border-radius: 3px;font-size: 25px;">
	          <Plus />
	        </el-icon>
	      </el-upload>
	    </el-form-item>
	  </el-form>
	  <template #footer>
	    <div class="dialog-footer">
	      <el-button @click="cancle">取 消</el-button>
	      <el-button type="primary" @click="confirm">确 定</el-button>
	    </div>
	  </template>
	</el-dialog> -->
</template>

<script setup>
	import {
		getCurrentInstance,
		reactive
	} from 'vue'
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus'
	import {
		Plus
	} from '@element-plus/icons-vue'

	const axios = getCurrentInstance().appContext.config.globalProperties.axios

	//查询信息
	const queryInfo = reactive({
		username: '',
		testName: '',

		pageNum: 1,
		pageSize: 10,
	})


		const total = ref(0)

	//当前页数据
	const dataList = ref([])

	//存储复选数据
	const multipleSelection = ref([])
	const handleSelectionChange = (val) => {
		multipleSelection.value = val.map((item) => {
			return item.id
		})
		console.log(multipleSelection.value)
	}


	//查询数据的函数
	const query = () => {
		axios
			.get(`topicResult/pages?sysUser1.username=${queryInfo.username}&psyknoTest1.testName=${queryInfo.testName}&pageNum=${queryInfo.pageNum}&pageSize=${queryInfo.pageSize}`)
			.then((resp) => {
				if (resp.code === 200) {
					dataList.value = resp.data.list
					total.value = resp.data.total
				} else {
					ElMessage.error('查询数据失败')
				}
			})
	}

	//每页显示条目数改变
	const handleSizeChange = (val) => {
		queryInfo.pageSize = val
		query()
	}

	//页码改变
	const handleCurrentChange = (val) => {
		queryInfo.pageNum = val
		query()
	}

	//单个删除
	const remove = (id) => {
		ElMessageBox.confirm('此操作将永久删除该文件, 是否继续?', 'Warning', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
			.then(() => {
				axios.delete(`topicResult/${id}`).then((resp) => {
					if (resp.code == 200) {
						ElMessage.success('删除成功')
					} else {
						ElMessage.error('删除失败')
					}
					query()
					dialogFormVisible.value = false
				})
			})
			.catch(() => {
				ElMessage({
					type: 'info',
					message: '取消删除',
				})
			})
	}
	//批量删除
	const batchRemove = () => {
		ElMessageBox.confirm('此操作将永久删除这些文件, 是否继续?', 'Warning', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
			.then(() => {
				axios
					.delete('topicResult', {
						params: {
							ids: multipleSelection.value.join(','),
						},
					})
					.then((resp) => {
						if (resp.code == 200) {
							ElMessage.success('删除成功')
						} else {
							ElMessage.error('删除失败')
						}
						query()
					})
			})
			.catch(() => {
				ElMessage({
					type: 'info',
					message: '取消删除',
				})
			})
	}

	//页码加载就展示数据
	onMounted(() => {
		query()
	})
</script>

<style>
	.el-breadcrumb {
		font-size: 14px;
		border-bottom: 1px solid #eee;
		padding-bottom: 15px;
	}

	.demo-form-inline .el-input {
		--el-input-width: 220px;
	}

	.demo-form-inline .el-select {
		--el-select-width: 220px;
	}

	.el-pagination {
		margin-top: 15px;
	}
</style>